<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#handler{cursor:nw-resize}
</style>
</HEAD>

<BODY>
<table id="d_box" border="1" style="border-collapse:collapse;border-color:red;width:500px;height:300px;position:absolute;" cellpadding="0" cellspacing="0">
<tr><td id='bar' style="background-color:blue;height:20px;cursor:move" colspan='2'>Title</td></tr>
<tr><td colspan='2'>some words</td></tr>
<tr><td style="width:90%">&nbsp;</td><td id="handler" style="background:transparent url(images/br.gif) no-repeat;width:12px;height:12px;">&nbsp;</td></tr>
</table>
<script>
var $ = function(id){return document.getElementById(id)}
var BindAsEventListener = function(obj,fun){
	var args = Array.prototype.slice.call(arguments,2)
	return function(event){
		fun.apply(obj,[event||window.event].concat(args))
	}
}
var addEvent = function(obj,event,fun){
	if(document.addEventListener){
			obj.addEventListener(event,fun,false)
		}else{
			obj.attachEvent('on'+event,fun)
		}
}

var removeEvent = function(obj,event,fun){
	if(document.removeEventListener){
		obj.removeEventListener(event,fun,false)
	 }else{
		obj.detachEvent('on'+event,fun)
	 }
}
var Class = {
	create:function(){
		return function(){ this.initialize.apply(this,arguments) }
	}
}
var DR = Class.create()
DR.prototype = {
	initialize:function(action,obj){
		this.obj = $(obj);
		this.r_hand_obj = action.resize&&$(action.resize)
		this.d_hand_obj = action.drag&&$(action.drag)
		if(this.r_hand_obj) addEvent(this.r_hand_obj,'mousedown',BindAsEventListener(this.r_hand_obj,this.resize,this.obj))
		if(this.d_hand_obj) addEvent(this.d_hand_obj,'mousedown',BindAsEventListener(this.d_hand_obj,this.drag,this.obj))
	},
	resize:function(e,obj){
		var e = e||window.event;
		var o_x = e.clientX,o_y = e.clientY
		var o_width = obj.clientWidth,o_height = obj.clientHeight
		addEvent(document,'mousemove',moveHandler)
		addEvent(document,'mouseup',upHandler)

		function moveHandler(e){
			var e = e||window.event;
			var d_x = e.clientX - o_x,d_y = e.clientY - o_y;
			obj.style.width = Math.max(o_width + d_x,0) + 'px'
			obj.style.height = Math.max(o_height + d_y,0) + 'px'
		}

		function upHandler(){
			removeEvent(document,'mousemove',moveHandler)
			removeEvent(document,'mouseup',upHandler)
		}
	},
	drag:function(e,obj){
		var e = e||window.event
		var o_x = e.clientX,o_y = e.clientY;
		var o_left = obj.offsetLeft,o_top = obj.offsetTop;
		addEvent(document,'mousemove',moveHandler)
		addEvent(document,'mouseup',upHandler)

		function moveHandler(e){
			var e = e||window.event;
			var d_x = e.clientX - o_x,d_y = e.clientY - o_y;
			obj.style.left = Math.max(o_left + d_x,0) + 'px'
			obj.style.top = Math.max(o_top + d_y,0) + 'px'
		}

		function upHandler(){
			removeEvent(document,'mousemove',moveHandler)
			removeEvent(document,'mouseup',upHandler)
		}
	}
	
}

new DR({drag:'bar',resize:'handler'},'d_box')
</script>
</BODY>
</HTML>
